<template>
  <div class="menu-container">
    <ul class="menu">
      <li class="menu-item"
          v-for="item in menuConfig"
          :key="item.path">
        <router-link :to="item.path" class="menu-item-link">
          <component class="menu-item-icon" :is="item.icon"/>
          <div class="menu-item-text">{{item.title}}</div>
        </router-link>
      </li>
    </ul>
    <div class="menu-bottom">
      <ul class="menu">
        <li class="menu-item">
          <router-link to="/admin" class="menu-item-link">
            <SettingFilled class="menu-item-icon"/>
            <div class="menu-item-text">设置</div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import {SettingFilled} from "@ant-design/icons-vue";
import menuConfig from "@/config/menus";
</script>

<style scoped>
.menu-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 64px); /* 使容器占满整个视口高度 */
}

.menu {
  padding: 8px 0 0;
  margin: 0;
  flex: 1; /* 使菜单内容占据剩余空间 */
  overflow-y: auto;
}

.menu .menu-item {
  list-style: none;
}

.menu-item {
  display: block;
  text-align: center;
  padding: 0 6px;
  box-sizing: border-box;
}
.menu-item+.menu-item {
  margin-top: 4px;
}

.menu-item-link {
  display: block;
  color: rgba(255,255,255,.65);
  padding: 8px 0;
  border-radius: var(--radius);
}
.menu-item-link:hover,
.menu-item-link.router-link-active.router-link-exact-active
{
  background-color: #000c17;
  color: #ffffff;
  transition: var(--transition);
}
.menu-item-icon {
  font-size: 18px;
  margin: 0;
}

.menu-item-text {
  font-size: 12px;
  margin-top: 4px;
}

.menu-bottom {
  margin-top: auto; /* 使 menu-bottom 吸附在底部 */
  padding-bottom: 20px;
}
</style>
